<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>组件&Props</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>

  	<!-- 

			1.组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。  

			2.定义组件的方式有两种：函数定义/类定义组件

      3.当React遇到的元素是用户自定义的组件，它会将JSX属性放到props对象中传递给该组件

      4.组件名称必须以大写字母开头

          例如，<div />表示一个DOM标签，但<Welcome />表示一个组件并限定了它的可用范围

      5.Props的只读性，无论是使用函数或者是类来声明一个组件，它绝不能修改自己的props

  	 -->

    <div id="root"></div>

    <script type=text/babel>

      /*  
      //声明组件
      function Welcome(props) {

          console.log(props)//通过props对象来接收传入的数据

          return <h1>Hello, {props.name}</h1>;
        }

      //使用组件
      const element=<Welcome name='leo'></Welcome>

      //渲染组件
      ReactDOM.render(
        
        element,

        document.getElementById('root')

      )
      */
     
     
     //组件嵌套，父子组件之间通信
     /*
      function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
      }

      function App() {
        return (
          <div>
            <Welcome name="Sara" />
            <Welcome name="Cahal" />
            <Welcome name="Edite" />
          </div>
        );
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
      */
     
     //提取组件，对组件进行拆分

      function Comment(props) {

        console.log(props)

        let [a, b, c] = props.data

        console.log(a);

        return (
          <div className="Comment">
      
            <div className="User-name">
              {a.name}
            </div>

            <div className="Comment-text">
              {b.text}
            </div>

            <div className="Comment-date">
              {c.date}
            </div>

          </div>
        )
      }

      const data=[

        {
          name:'leo'
        },

        {
          text:'1111'
        },

        {
          date:171031
        }
      ]

      ReactDOM.render(

        <Comment data={ data }></Comment>,

        document.getElementById('root')
        
      )
    </script>
  </body>
</html>
